HTML、CSS、JS 之間的關係

1.HTML：描述網頁內容。
2.CSS：指定網頁呈現方式。
3.JavaScript：描述網頁行為。

在 JavaScript 程式中，以下這行程式碼很常見：

document.getElementById('input').textContent = "Hello World";

從這行程式碼中就可以略知 JavaScript 是如何跟網頁共同運作的，以下就來解說這行程式碼意思。

1. document — 取得 HTML 文件。這裡的 document 是個物件，代表整個網頁。
2. getElementById — 在 HTML 文件中透過 id 來找到我想要的元素。getElementById() 是 document 物件中的其中一個方法。
3. ('input') — 我想要找到名為 input 的元素。當方法需要額外的資訊來運作時，會把資訊放在小括號中，此資訊稱為參數。
4. textContent — 取得這個元素的文字內容。是 HTML 物件中的其中一個屬性。
5. = "Hello World" — 把文字內容設定成 "Hello World"。

如果用白話解釋整句意思就是
網頁主體( document )，宣告用 使用 id 元件( getElementById ) 加上設定的 id 名稱 將原本的文字，使用 **文字內容( textContent ) **的語法變成 指定文字(這裡是寫 Hello World )

id 解析

當我們學到 HTML、CSS 時，會了解到 id 可以幫助我們指定特定的 HTML 元素並添加樣式，但其實 id 不只可以寫樣式，也是用 JavaScript 操控物件的關鍵屬性，用途如錨點、改變文字內容（如上面提到的 textcontent）等。

網頁解析

瀏覽器會解析網頁，並把網頁視為一個文件 (document)，裡面的 HTML 元素會形成樹狀圖(DOM 樹)。
解讀完以後，就會由上而下依序顯示出網頁內容。當讀到 JavaScript 檔案的時候，渲染會暫停，因為瀏覽器會先把 JavaScript 程式的內容先執行完，再渲染後面的內容。
所以 JavaScript 檔案要放在 HTML 的最後，body 結束標籤之前。
解譯器 (interpreter) 可以透過它的 JavaScript 引擎幫我們做編譯，並且即時顯示出效果，例如 Chrome 的 V8 引擎。